<template>
  <div class="sjkh">
    <div class="top">干部实绩赋分系统</div>
    <div class="next">
      <div class="cj">
        <div class="title">
          <div class="titleImg"></div>
          <span>场景介绍</span>
        </div>
        <div class="context">
          <div class="text">
            为考准考实领导干部工作实绩，切实提升选人用人精准度，柯桥区委认真贯彻落实中央和省委、市委改进推动高质量发展政绩考核的有关精神，出台《关于实施区管领导干部“领跑竞跑”工作实绩考核管理的意见》。
          </div>
          <p>
            实现<mark>“人人有分数、个个有排名”</mark>激励干部担当作为、争先率先。
          </p>
          <p>解决<mark>“考核谁”、“考核什么”，“怎么考核”</mark>的问题。</p>
        </div>
      </div>
      <div class="zb">
        <div class="title">
          <div class="titleImg"></div>
          <span>指标总览</span>
        </div>
        <div class="con">
          <div class="kh">
            <div class="ss">
              <div class="khpc">
                <p>考核频次</p>
                <p>
                  <mark>{{ msg.appraiseCount }}</mark>
                  <span>次</span>
                </p>
              </div>
              <div class="sjdw">
                <p>涉及单位</p>
                <p>
                  <mark style="color: #13c2c2">{{ this.msg.deptCount }}</mark>
                  <span>个</span>
                </p>
              </div>
            </div>
            <div class="xx">
              <div class="rs">
                <p>考核总人数</p>
                <p>
                  <mark>{{ this.msg.staffCount }}</mark>
                  <span>人</span>
                </p>
              </div>
              <div class="dw">
                <p>机关单位</p>
                <p>
                  <mark>{{ this.msg.deptStaffCount }}</mark>
                  <span>人</span>
                </p>
              </div>
              <div class="pt">
                <p>镇街(平台)</p>
                <p>
                  <mark>{{ this.msg.streetStaffCount }}</mark>
                  <span>人</span>
                </p>
              </div>
            </div>
          </div>
          <div class="tjs">
            <div class="tj">
              <div class="zjpt" @click="tab1" :class="num == 1 ? 'active' : ''">
                机关部门考核人数统计
              </div>
              <div class="zjpt" :class="num == 2 ? 'active' : ''" @click="tab2">
                镇街(平台)考核人数统计
              </div>
            </div>
            <div id="charts1" ref="echartId1" v-if="show == 1"></div>
            <div id="charts4" ref="echartId4" v-if="show == 2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="task">
      <div class="qd">
        <div class="title">
          <div class="titleImg"></div>
          <span>重大任务清单</span>
        </div>
        <el-carousel height="20rem" width="35rem" indicator-position="outside">
          <el-carousel-item v-for="items in newArr" :key="items.value">
            <ul class="list">
              <li v-for="item in items" :key="item.index">
                <div class="qdIcon"></div>
                <div class="txt">
                  <p>
                    {{ item.content }}
                  </p>
                  <p class="p2">
                    {{ item.content }}
                  </p>
                  <div class="ming">
                    {{ item.deptName }}&nbsp;&nbsp;|&emsp;{{
                      item.updateTime | formatDate
                    }}
                  </div>
                </div>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="qk">
        <div class="title">
          <div class="titleImg"></div>
          <span>重大任务承接情况</span>
        </div>
        <div id="charts2" ref="echartId2"></div>
      </div>
      <div class="jg">
        <div class="title">
          <div class="titleImg"></div>
          <span>考核结果晾晒</span>
        </div>
        <div class="ranking">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            :row-style="{ height: '3.13rem' }"
          >
            <el-table-column label="排名" width="80">
              <template slot-scope="scope">
                <img
                  style="width: 1.25rem; height: 1.25rem"
                  v-if="scope.$index == 0"
                  :src="tableDatas.date"
                  alt=""
                />
                <img
                  style="width: 1.25rem; height: 1.25rem"
                  v-else-if="scope.$index == 1"
                  :src="tableDatass.date"
                  alt=""
                />
                <img
                  style="width: 1.25rem; height: 1.25rem"
                  v-else-if="scope.$index == 2"
                  :src="tableDatasss.date"
                  alt=""
                />
                <p style="text-indent: 0.31rem" v-else>
                  {{ scope.row.deptId }}
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="deptName" label="单位名称" width="300">
            </el-table-column>
            <el-table-column prop="totalScore" label="得分"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="then">
      <div class="jd">
        <div class="title">
          <div class="titleImg"></div>
          <span>年度考核进度</span>
        </div>
        <div class="ccc">
          <div class="tab">
            <div>指标分解</div>
            <!-- <div>统筹赋分</div>
                        <div>双向评价</div> -->
          </div>
          <div class="tubiao">
            <div id="charts3" ref="echartId3"></div>
            <div class="will">
              <div class="head">
                <p>指标分解未完成单位</p>
              </div>
              <div class="dwmcBox">
                <div class="dwmc">{{ resolve.deptName }}</div>
                <!-- <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div>
                                <div class="dwmc">单位名称</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="title">
          <div class="titleImg"></div>
          <span>总体架构</span>
        </div>
        <div class="bdImg"></div>
      </div>
    </div>
    <div class="progress">
      <div class="title">
        <div class="titleImg"></div>
        <span>考核总进度</span>
      </div>
      <div class="xBox">
        <div class="one">
          <div class="num">
            <div class="num1"></div>
          </div>
          <div class="plan plan1">区委组织部</div>
          <div class="xxBox">
            <div class="xxxBox">
              <div class="small">发起考核</div>
              <div class="small">考核结构</div>
              <div class="small">考核对象</div>
            </div>
          </div>
        </div>
        <div class="one">
          <div class="num">
            <div class="num1 num2"></div>
          </div>
          <div class="plan plan2">区级各部门、镇街</div>
          <div class="xxBox">
            <div class="xxxBox">
              <div class="small">指标落实到人</div>
              <div class="small">单位内统筹分配</div>
              <div class="small">镇街明确分管线</div>
            </div>
          </div>
        </div>
        <div class="one">
          <div class="num nums">
            <div class="num1 num3"></div>
          </div>
          <div class="plan plan3">双向评价主体</div>
          <div class="xxBox xxBoxs">
            <div class="xxxBox">
              <div class="small smalls">区领导、各对应部门、镇街进行评价</div>
            </div>
          </div>
        </div>
        <div class="one">
          <div class="num">
            <div class="num1 num4"></div>
          </div>
          <div class="plan plan4">区委改革办</div>
          <div class="xxBox">
            <div class="xxxBox">
              <div class="small">部门分管区领导设置</div>
              <div class="small">镇街联系区领导、分管区领导设置</div>
              <div class="small">部门(镇街)分组设置</div>
              <div class="small">部门(镇街)指标及打分单位</div>
            </div>
          </div>
        </div>
        <div class="one">
          <div class="num">
            <div class="num1 num5"></div>
          </div>
          <div class="plan plan5">区委改革办/区委组织部</div>
          <div class="xxBox">
            <div class="xxxBox">
              <div class="small small5">
                指标考核结果录入，包含市对区指标和区对部
                <p>门指标</p>
              </div>
              <div class="small">联村结果录入</div>
              <div class="small">负面情形扣分</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flow">
      <div class="title">
        <div class="titleImg"></div>
        <span>流程再造</span>
      </div>
      <div class="box1">
        <div class="left">
          <div class="xscz">
            <div class="xsImg"></div>
            <div class="xsdo">线下操作</div>
          </div>
          <p>改造前</p>
        </div>
        <div class="right">
          <div class="si">
            <div class="kuai">面向单位多 聚焦个人少</div>
            <div class="kuai">不量化</div>
            <div class="kuai">信息采集难</div>
            <div class="kuai">不精准</div>
          </div>
          <div class="san">
            <div class="block">任务重</div>
            <div class="block">保密难</div>
            <div class="block">缺乏对干部工作执行、实绩成效的分析掌握</div>
          </div>
        </div>
      </div>
      <div class="box2">
        <div class="left">
          <div class="xscz">
            <div class="xsImg xs"></div>
            <div class="xsdo">线上操作</div>
          </div>
          <p>改造后</p>
        </div>
        <div class="cards">
          <div class="card">
            <p>发起考核</p>
            <div class="boult"></div>
          </div>
          <div class="card">
            <p>设置指标</p>
            <div class="boult"></div>
          </div>
          <div class="card">
            <p>指标定则</p>
            <div class="boult"></div>
          </div>
          <div class="card">
            <p>打分</p>
            <div class="boult"></div>
          </div>
          <div class="card">
            <p>双向评级</p>
            <div class="boult"></div>
          </div>
          <div class="card">
            <p>生成榜单</p>
          </div>
        </div>
      </div>
    </div>
    <div class="dk">
      <div class="title">
        <div class="titleImg"></div>
        <span>多跨场景</span>
      </div>
      <div class="hh">
        <div class="zuo"></div>
        <div class="you">
          <div class="gjqk">归集情况</div>
          <div class="renwu">
            <div class="square">
              <div class="lvImg lvImg1"></div>
              <div class="yy">
                <p>二级任务</p>
                <div class="pro">
                  <div class="nn">3&nbsp;</div>
                  <div class="yi">项</div>
                </div>
              </div>
            </div>
            <div class="square">
              <div class="lvImg lvImg1"></div>
              <div class="yy">
                <p>三级任务</p>
                <div class="pro">
                  <div class="nn">11&nbsp;</div>
                  <div class="yi">项</div>
                </div>
              </div>
            </div>
            <div class="square">
              <div class="lvImg lvImg1"></div>
              <div class="yy">
                <p>四级任务</p>
                <div class="pro">
                  <div class="nn">29&nbsp;</div>
                  <div class="yi">项</div>
                </div>
              </div>
            </div>
            <div class="square">
              <div class="lvImg lvImg1"></div>
              <div class="yy">
                <p>协同部门</p>
                <div class="pro">
                  <div class="nn">11&nbsp;</div>
                  <div class="yi">个</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="apply">
      <div class="title">
        <div class="titleImg"></div>
        <span>应用场景</span>
      </div>
      <div class="grade">
        <div class="sjff">
          <div class="tt">实际赋分(80分)</div>
          <div class="work">
            <div class="sjBox">
              <div class="sjffImg"><span>60</span></div>
              <p>单位基本实绩</p>
            </div>
            <div class="jia"></div>
            <div class="sjBox">
              <div class="sjffImg"><span>20</span></div>
              <p>争先创优实绩</p>
            </div>
          </div>
        </div>
        <div class="sxpj">
          <div class="tt">双向评价(20分)</div>
          <div class="sxpjImg"></div>
        </div>
        <div class="fxkf">
          <div class="tt">反向扣分</div>
          <div class="fxkfImg"></div>
        </div>
      </div>
    </div>
    <div class="yycx">
      <div class="title">
        <div class="titleImg"></div>
        <span>应用成效</span>
      </div>
      <div class="last">
        <div class="option">
          <div class="ttt">考核到位</div>
          <div class="up">
            <div class="relevance"></div>
            <div class="textBig">
              <div class="zi texts">由单一的纵向评价推展到纵横交错评价</div>
              <div class="zi texts">实现让相关知情人都来评分打分</div>
            </div>
          </div>
          <div class="up">
            <div class="relevance"></div>
            <div class="textBig">
              <div class="zi texts">
                综合运用基本得分、排名比分、统筹赋分、反向扣分
              </div>
              <div class="zi texts">
                实现基本实绩与争先创优同步、横向比较与纵向排名并行
              </div>
            </div>
          </div>
        </div>
        <div class="option">
          <div class="ttt">量化到人</div>
          <div class="cons">
            <div class="zi textss texts1">
              <div class="number"></div>
              <p>以实绩作答、用数字说话</p>
            </div>
            <div class="zi textss texts2">
              <div class="number2"></div>
              <p>
                通过实绩赋分，统筹考虑领导干部承担工作的质量和数量,将单位岗位目标任务数字计算到个人，实现个人贡献与集体作用、单位整体成效与个人分工实绩的有效分离。
              </p>
            </div>
          </div>
        </div>
        <div class="option">
          <div class="ttt">精准到点</div>
          <div class="cons">
            <div class="zi textss texts1">
              <div class="number"></div>
              <p>多元化考核主体参与到考核过程</p>
            </div>
            <div class="zi textss texts1">
              <div class="number2"></div>
              <p>多维度考核信息进行数据融合</p>
            </div>
            <div class="zi textss texts1">
              <div class="number3"></div>
              <p>实现“线上操作、指尖评价、系统生成”</p>
            </div>
          </div>
        </div>
        <div class="option">
          <div class="ttt">变革未来</div>
          <div class="cons">
            <div class="t1">
              <div class="tabImg">重塑</div>
              <p>领导干部考核管理体系</p>
            </div>
            <div class="t1">
              <div class="tabImg">促使</div>
              <p>区对镇街部门岗位目标责任制考核的变革调整</p>
            </div>
            <div class="t1">
              <div class="tabImg">推动</div>
              <p>单位内部运行机制优化改善</p>
            </div>
            <div class="t1">
              <div class="tabImg">实现</div>
              <p>干部激励担当措施的有效落实</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate } from "../utils/date";
import {
  reqOverview,
  reqTask,
  reqCase,
  reqPlan,
  reqResult,
} from "../utils/api";
export default {
  name: "Sjff",
  data() {
    return {
      num: 1,
      show: 1,
      msg: [],
      dwmc: [],
      best: [],
      tableData: [],
      resolve: [],
      newArr: [],
      tableDatas: {
        date: require("../assets/sjffimg/第一名.png"),
      },
      tableDatass: {
        date: require("../assets/sjffimg/第二名.png"),
      },
      tableDatasss: {
        date: require("../assets/sjffimg/第三名.png"),
      },
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy年MM月dd日");
    },
  },
  methods: {
    tab1() {
      this.num = 1;
      this.show = 1;
      setTimeout(() => {
        this.draw1();
      });
    },
    tab2() {
      this.num = 2;
      this.show = 2;
      setTimeout(() => {
        this.draw4();
      });
    },
    //机关部门考核人数统计
    async draw1() {
      let myChart1 = this.$echarts.init(this.$refs.echartId1);
      const res = await reqOverview();
      console.log(res.data);
      this.msg = res.data.data;
      let msgnum = res.data.data.deptStaffCountList;
      let msgname = [];
      let msgnumber = [];
      for (var i = 0; i < msgnum.length; i++) {
        msgname.push(msgnum[i].deptName);
        msgnumber.push(msgnum[i].staffCount);
      }
      myChart1.setOption({
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: function (val) {
              var strs = val.split(""); //转化为字符串数组
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                str += s;
                if (!(i % 3))
                  //两个字符换行
                  str += "\n";
              }
              return str;
            },
          },
          data: msgname.slice(0, 7),
        },
        tooltip: {
          show: true,
        },
        grid: {
          top: "10%",
          left: "1%",
          right: "5%",
          bottom: "1%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: msgnumber.slice(0, 7),
            type: "bar",
            barWidth: 24,
            color: "#1492FF",
          },
        ],
      });
    },
    //镇街(平台)考核人数统计
    async draw4() {
      let myChart4 = this.$echarts.init(this.$refs.echartId4);
      const res = await reqOverview();
      this.msg = res.data.data;
      let msgnum2 = res.data.data.streetStaffCountList;
      let msgname2 = [];
      let msgnumber2 = [];
      for (var i = 0; i < msgnum2.length; i++) {
        msgname2.push(msgnum2[i].deptName);
        msgnumber2.push(msgnum2[i].staffCount);
      }
      myChart4.setOption({
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: function (val) {
              var strs = val.split(""); //转化为字符串数组
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                str += s;
                if (!(i % 3))
                  //两个字符换行
                  str += "\n";
              }
              return str;
            },
          },
          data: msgname2.slice(0, 7),
        },
        tooltip: {
          show: true,
        },
        grid: {
          top: "10%",
          left: "1%",
          right: "5%",
          bottom: "1%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: msgnumber2.slice(0, 7),
            type: "bar",
            barWidth: 24,
            color: "#1492FF",
          },
        ],
      });
    },
    //重大任务承接情况
    async draw2() {
      let myChart2 = this.$echarts.init(this.$refs.echartId2);
      const res = await reqCase();
      let data = res.data.data;
      let num = [];
      let name = [];
      for (var i = 0; i < data.length; i++) {
        num.push(data[i].missionCount);
        name.push(data[i].deptName);
      }

      myChart2.setOption({
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: function (val) {
              var strs = val.split(""); //转化为字符串数组
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                str += s;
                if (!(i % 3))
                  //两个字符换行
                  str += "\n";
              }
              return str;
            },
          },
          data: name.slice(0, 7),
        },
        grid: {
          top: "4%",
          left: "4%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: num.slice(0, 7),
            type: "bar",
            barWidth: 24,
            color: "#FA8C16 ",
          },
        ],
      });
    },
    //指标分解
    async draw3() {
      let myChart3 = this.$echarts.init(this.$refs.echartId3);
      const res = await reqPlan();
      var dataArr = res.data.data.completeRate;
      var colorSet = {
        color: "#468EFD",
      };
      myChart3.setOption({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "指标分解",
            type: "gauge",
            center: ["50%", "65%"],
            radius: "65%",
            startAngle: 190,
            endAngle: -10,
            splitNumber: 14,
            axisLine: {
              lineStyle: {
                color: [
                  [dataArr / 100, colorSet.color],
                  [1, "#1492FF"],
                ],
                width: 8,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              formatter: function (value) {
                if (value !== 0) {
                  var num = Math.round(value);
                  return parseInt(num).toFixed(0) + "%";
                } else {
                  return 0;
                }
              },
              offsetCenter: [0, -20],
              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 22,
                fontWeight: "700",
                color: colorSet.color,
              },
            },
            title: {
              show: true,
              offsetCenter: [0, -40],
              textStyle: {
                // color: '#fff',
                fontSize: 14, //表盘上的标题文字大小
                fontWeight: 400,
              },
            },
            data: [
              {
                name: "完成率",
                value: dataArr,
              },
            ],
            pointer: {
              show: true,
              length: "60%",
              radius: "10%",
              width: 4, //指针粗细
            },
            animationDuration: 4000,
          },
          {
            name: "外部刻度",
            type: "gauge",
            center: ["50%", "65%"],
            radius: "70%",
            min: 0, //最小刻度
            max: 98, //最大刻度
            splitNumber: 14, //刻度数量
            startAngle: 190,
            endAngle: -10,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            },
            //仪表盘轴线
            axisLabel: {
              show: true,
              color: "grey",
              distance: 40,
              fontSize: 9,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 7,
              lineStyle: {
                color: colorSet.color, //用颜色渐变函数不起作用
                width: 1,
              },
              length: -12,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -20,
              lineStyle: {
                color: colorSet.color, //用颜色渐变函数不起作用
              },
            }, //分隔线样式
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
        ],
      });
    },
    // 重大任务清单
    async task() {
      const res = await reqTask();
      console.log(res);
      for (var i = 0; i < res.data.data.length; i++) {
        this.newArr.push(res.data.data.slice(i, i + 4));
      }
    },
    //指标分解
    async plan() {
      const res = await reqPlan();
      this.resolve = res.data.data.undecomposedDeptList[0];
    },
    //考核结果晾晒
    async result() {
      const res = await reqResult();
      this.tableData = res.data.data;
    },
  },
  created() {},
  mounted() {
    this.draw1();
    this.draw2();
    this.draw3();
    this.draw4();
    this.task();
    this.plan();
    this.result();
  },
};
</script>
<style scoped>
@import url("../assets/css/reset.css");
@import url("../assets/css/sjff.css");
</style>
